<template>
  <div class="cate">
    <van-tree-select
      height="90vh"
      :items="cateList"
      :main-active-index.sync="active"
      @click-nav="activeSelect"
    >
      <template #content>
        <div class="box">
          <div class="img-wrap">
            <img :src="currentCategory.img_url" alt />
            <div class="block"></div>
            <p>{{ currentCategory.front_desc }}</p>
          </div>
          <big-title :name="currentCategory.name ? currentCategory.name + '分类' : '分类'"></big-title>
          <div class="item-wrap">
            <cate-item
              class="item"
              :item="item"
              v-for="item in currentCategory.subCategoryList"
              :key="item.id"
            ></cate-item>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { GetHomeData, GetSiderData } from "@/request/api";
import CateItem from "./CateItem";
import BigTitle from "../common/BigTitle";
export default {
  components: {
    CateItem,
    BigTitle
  },
  data() {
    return {
      active: 0,
      cateList: [],
      currentCategory: {}
    };
  },
  methods: {
    // 点击侧边栏
    activeSelect(index) {
      this.active = index;
      this.getCateData();
    },
    // 请求右侧数据
    async getCateData() {
      const { data: res } = await GetSiderData({
        id: this.cateList[this.active].id
      });
      console.log(res);
      this.currentCategory = res.currentCategory;
    }
  },
  created() {
    // 获取左侧数据
    GetHomeData().then(res => {
      // console.log(res)
      this.cateList = res.data.categoryList.map(item => {
        return { id: item.id, text: item.name };
      });
      console.log( this.cateList);
      
      // 请求右侧数据
      this.getCateData();
    });
  }
};
</script>

<style lang="less" scoped>
.cate {
  .van-sidebar {
    flex: 0.5;
  }
  .box {
    padding: 3px;
    .img-wrap {
      margin-top: 10px;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid #cccc;
      position: relative;
      height: 44vw;
      img {
        width: 100%;
        height: 44vw;
        display: block;
      }
      .block {
        top: 0;
        position: absolute;
        width: 100%;
        height: 44vw;
        background-color: rgba(0, 0, 0, 0.3);
      }
      p {
        margin: 0;
        font-size: 16px;
        position: absolute;
        text-align: center;
        color: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .item-wrap {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
